# 实战篇 3：天气页面样式布局开发

# 先写一个 icon 组件

「新鲜天气」项目中，用到的 icon 比较多，比如天气图标、心情签到的表情，都是来自 icon 组件，本小节介绍下如何自定义个 icon 组件。

我们项目的自定义组件放在 client/components 目录下，首先在其目录下创建 icon 目录，创建组件的页面、样式和 JS 文件：

client/components
└── icon
    ├── index.js
    ├── index.json
    ├── index.scss
    ├── index.wxml
    └── weather.ttf

@前端进阶之旅: 代码已经复制到剪贴板

组件需要在自己的页面配置文件（page.json，即 index.json）中声明自己是一个组件：

// index.json
{
  "component": true
}

@前端进阶之旅: 代码已经复制到剪贴板

# 编写组件代码

icon 组件的 WXML 部分代码很简单：

<!--index.wxml-->
<text class="icon icon-{{ type }}"></text>

@前端进阶之旅: 代码已经复制到剪贴板

笔者定义了一个 icon 的类型字段，该字段由使用方传入，所以对应 JS 的写法为：

// index.js
Component({
  properties: {
    type: {
      type: String,
      value: ''
    }
  }
});

@前端进阶之旅: 代码已经复制到剪贴板

JS 中使用了 Component 构造器，调用 Component 构造器时可以指定组件的属性、数据、方法等。上面代码中定义了组件可以接受的 properties 有 type，type 是一个字符串类型的值，默认值是空字符串。

跟所有的 icon 样式写法一样，笔者通过图标共有的 class icon 定义了统一的样式，包括字体、大小等：

/* index.scss */
@font-face {
  font-family: "weather";
  src: url("./weather.ttf") format("truetype");
}

.icon {
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -webkit-text-stroke-width: .4rpx;
  -moz-osx-font-smoothing: grayscale;
}

.icon::after,
.icon::before {
  font-family: weather !important;
}

@前端进阶之旅: 代码已经复制到剪贴板

然后通过 .icon-{{type}} 定义了不同的图标对应 class 的 content：

/* index.scss */
.icon.icon-xiaolian:before {
  content: "\e60f";
}

.icon.icon-shidu:before {
  content: "\e610";
}

.icon.icon-zhongyu:before {
  content: "\e611";
}

@前端进阶之旅: 代码已经复制到剪贴板

# 字体文件的引用问题

在小程序内，不支持使用 webfont 的 @font-face 引入本地的 ttf 等文件，这时候需要使用线上地址或者 base64。

在新鲜天气的开发中，笔者使用了 Gulp 直接将 webfont 转换成 base64 引入，这样写代码的时候就不需要关注这些事情了，具体做法为：

const rename = require('gulp-rename')
const postcss = require('gulp-postcss')
const pxtorpx = require('postcss-px2rpx')
const base64 = require('postcss-font-base64')
const combiner = require('stream-combiner2')

gulp.task('wxss', () => {
  const combined = combiner.obj([
    gulp.src(`${src}/**/*.{wxss,scss}`),
    sass().on('error', sass.logError),
    postcss([pxtorpx(), base64()]),
    rename((path) => (path.extname = '.wxss')),
    gulp.dest(dist)
  ])

  combined.on('error', handleError)
})

@前端进阶之旅: 代码已经复制到剪贴板

除了字体以外，图片类静态资源的引入可以使用本地资源相对路径、base64 和线上地址，如果是线上地址，则必须是以 https 开头的协议。

# 在项目中使用自定义组件

在需要使用自定义组件的页面配置文件 page.json 中添加 usingComponents 字段：

"usingComponents": {
  "icon": "../../components/icon/index"
}

@前端进阶之旅: 代码已经复制到剪贴板

其中，icon 就是我们自定义的标签名称，后面的值则是相对于页面文件、icon 组件对应的路径。

这样引入后，在页面中就可以直接通过 icon 标签来使用自定义的 icon 组件了：

<!--定位icon-->
<icon type="dingwei" />
<!--天气icon-->
<icon type="{{ today.icon }}" class="logo"></icon>

@前端进阶之旅: 代码已经复制到剪贴板

也可以使用 CSS（WXSS）来控制它的样式：

icon {
  float: right;
  font-size: 44rpx;
  height: 44rpx;
  width: 44rpx;
}

@前端进阶之旅: 代码已经复制到剪贴板

如何编辑字体：icon 组件使用的字体是来自 iconfont.cn，然后在百度的字体编辑器中进行编辑。

# 天气预报页面

天气预报是小程序的第一个页面，首先在 app.json 中的 pages 处添加入口：

"pages": ["pages/weather/index"]

@前端进阶之旅: 代码已经复制到剪贴板

如果有多个页面，当前开发的页面可以放到 pages 数组的最前面，这样小程序的默认页面就是当前开发的页面，方便实时开发和查看效果。

添加完入口之后，在 client/pages 目录下创建 weather 文件夹，目录结构如下：

pages
└── weather
    ├── index.js
    ├── index.json
    ├── index.scss
    ├── index.wxml
    └── index.wxs

@前端进阶之旅: 代码已经复制到剪贴板

因为我们要使用上文完成的 icon 组件，所以在 index.json 中添加 usingComponents 字段，天气页面还支持下拉刷新，于是最终版本的 index.json 配置如下：

//index.json
{
  "enablePullDownRefresh": true,
  "usingComponents": {
    "icon": "../../components/icon/index"
  }
}

@前端进阶之旅: 代码已经复制到剪贴板

# 页面整体框架

首先我们来完成页面的整体框架 WXML 代码，页面整体包裹在 .wrapper 中，页面使用 .container 来区分不同的页面模块，模块之间通过 .container 的 margin-bottom 属性隔开。

<!--weather/index.wxml-->
<view class="wrapper" style="background: url({{backgroundImage}}) center -178rpx / 100% no-repeat {{backgroundColor}};">

  <view class="container" id="canvas-wrapper">
    <view class="now">
      <!--当前实时天气和空气质量-->
    </view>
    <view class="two-days">
      <!--今明两天天气-->
    </view>
  </view>
  <view class="weather" style="background-color: {{backgroundColor}}">
    <view class="container">
      <!--24 小时天气-->
    </view>
    <view class="container">
      <view class="week">
        <!--七天天气-->
      </view>
    </view>
    <view class="container">
      <view class="life-style">
         <!--生活指数-->
      </view>
    </view>
  </view>
</view>

@前端进阶之旅: 代码已经复制到剪贴板

// weather/index.scss
// 定义 container 间隔
$grid-margin: 20rpx;
.container {
  margin-bottom: $grid-margin;
  max-width: 750rpx;
  box-sizing: border-box;
  color: #fff;
}

@前端进阶之旅: 代码已经复制到剪贴板

.wrapper 的背景图片和 .weather 的背景色都是根据天气情况更换的，需要根据天气数据赋值，这里笔者设置了默认值：

Page({
  data: {
    // 页面数据
    backgroundImage: '../../images/cloud.jpg',
    backgroundColor: '#62aadc'
    ...

@前端进阶之旅: 代码已经复制到剪贴板

# 实时天气部分页面布局

天气页面的「实时天气」部分页面布局相对复杂，最终效果如图所示。

首先是当前天气部分页面结构：

上面页面需要的 AppData 示例数据为：

"air": {
  "status": 0,
  "aqi": "77",
  "color": "#00cf9a",
  "name": "良"
},
"current": {
  "backgroundImage": "https://tianqi-1d3bf9.tcb.qcloud.la/bg/day/overcast.jpg",
  "backgroundColor": "#5c7a93",
  "temp": "35",
  "wind": "南风",
  "windLevel": "1",
  "weather": "阴",
  "humidity": "73",
  "icon": "yin",
  "ts": "2018-08-12 14:54"
},

@前端进阶之旅: 代码已经复制到剪贴板

上面的 WXML 中，笔者还使用了 utils 的两个方法。utils的方法来自于index.wxs，要使用index.wxs需要在页面的顶部引入它：

<wxs src="./index.wxs" module="utils"></wxs>

@前端进阶之旅: 代码已经复制到剪贴板

WXS 相对 JS 来说语法更加受限，但是因为 WXML 的「双括号」数据绑定中对表达式的支持不够完善，我们在小程序开发中，可以使用 WXS 来增强 WXML 的表达式，其中 humidity 和 wind 的 WXS 代码如下：

实时天气模块中，今明两天的 WXML 结构如下：

由此可见，需要的 AppData 示例数据结构是：

需要说明的是，在今明两天天气布局中，笔者使用了 flex 布局，flex 布局使得小程序的页面布局更灵活，结构更明晰：